<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="loop()">计算</button>
    <button onclick="closeWorker()">关闭</button>
    <button onclick="testWorker()">test</button>
    <script>
        const worker = new Worker('./worker.js')

        worker.postMessage({ type: 'init' })
        worker.postMessage({ type: 'getName' })

        worker.onmessage = function (e) {
            console.log('%c主线程-收到消息：' + e.data, 'color:deeppink')
        }

        function loop() {
            worker.postMessage({ type: 'loop' })
        }
        function closeWorker() {
            worker.postMessage({ type: 'close' })
        }
        function testWorker() {
            const input = document.createElement('input')
            input.type = 'file'
            input.click()
            input.onchange = function (e) {
                worker.postMessage({ type: 'test', data: e.target.files[0] })
            }
        }

    </script>
</body>

</html>